
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户登录</title>
</head>
<script src="js/bootstrap_5.1.1_js_bootstrap.bundle.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap_5.1.1_css_bootstrap.min.css">
<style>
	body{
		background-image: url("img/3.jpg");
		background-size: 100vw 100vh;
	}
	.logo{
		position: relative;
		left: 12vw;
		bottom: 5vh;
        width: 400px;
        height: 100px;
	}
	#img_check{
		position: relative;
		bottom:5vh;
		left:300px;
		width: 125px;
		height: 50px;
	}
	#box{
		width: 50vw;
		height: 40vh;
		margin: auto;
		position: relative;
		top: 15vh;
	}
	label{
		font-size: 1.5vw;
		font-weight: bold;
	}
	.login{
		background-color: rgb(251, 114, 153);
		position: relative;
		bottom: 5vh;
		color: white;
	}
	#checkcode{
		width:250px;
	}
	#login{
		margin-top:30px;
	}
</style>
<body>
	<div class="box container">
		<div id="box" class="row">
			<img src="img/logo.png" alt="" class="logo">
	        <div class="col-md-6 offset-md-3 i_text">
		      <label class="form-label">账户:</label>
		      <input type="email" class="form-control"  placeholder="请输入账号" id="username">
	        </div>
	        <br>
	        <div class="col-md-6 offset-md-3 i_text">
		        <label class="form-label">密码:</label>
		        <input type="password" class="form-control" placeholder="请输入密码" id="password">
	         </div>
	        <div class="col-md-4 offset-md-3 i_text">
	          <label class="form-label">验证码:</label>
	          <input type="text" name="checkcode" id="checkcode" class="form-control" required>
	  	      <img src="" id="img_check">
	        </div>
	        <div class="col-md-4 offset-md-5 row">
	        	<button type="submit" class="btn col-md-6 login" id="login">登录</button>
	        </div>
		</div>    
    </div>
</body>
<script src="js/jquery.min.js"></script>
<script> 
window.onload=function(){
	getVerCode();
}
$("#img_check").click(function(){
	getVerCode();
})
var currnt;
function getVerCode(){
	$.ajax({
		type:"POST",
		url:"getcheckcode.do",
		success:function(data){
			$("#img_check").attr("src",data.verCodeImg);
			currnt=data.verCodeText;
		}
	})
}

$("button").click(function(){
	LoginUser();
})

function LoginUser(){
	$.ajax({
		type:"POST",
		url:"UserLoginServlet.do",
		data:{
			username:$("#username").val(),
			password:$("#password").val(),
		},
		success:function(data){
			if(data!=null && $("#checkcode").val() == currnt ){
				window.location.href ='index.html?id='+data.userId;
			}else{
				location.reload();
			}
		}
	})
}
</script>
</html>